<script setup lang="ts">
import { reactive, watch } from "vue";
import { UtilTool } from "@webxue/common";
import { CopyOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";

defineOptions({ name: "WebxInputPwd" });
const emits = defineEmits(["update:password"]);
const props = defineProps({
  // 初始密码
  initPwd: { type: String, default: "" },
  // 传过来的密码
  password: { type: String, default: "" }
});
const webxInputPwdData = reactive({
  // 输入的密码
  passwordVal: props.password
});

const pwdData = reactive({
  // 默认密码
  default: "",
  // 随机密码
  random: "",
  // 指定密码
  build: ""
});
const selectPwdModal = reactive({
  open: false,
  curOption: "default",
  pwdOptions: [
    { label: "默认密码", value: "default" },
    { label: "随机密码", value: "random" },
    { label: "指定密码", value: "build" }
  ],
  // 弹窗改变回调
  onChange(open: boolean) {
    if (open) {
      pwdData.build = props.password;
    }
    selectPwdModal.open = open;
  },
  // 弹窗的选择
  onSelect() {
    if (selectPwdModal.curOption === "default") {
      webxInputPwdData.passwordVal = pwdData.default;
    } else if (selectPwdModal.curOption === "random") {
      webxInputPwdData.passwordVal = pwdData.random;
    } else if (selectPwdModal.curOption === "build") {
      webxInputPwdData.passwordVal = pwdData.build;
    }
    selectPwdModal.onChange(false);
  },
  // 生成随机密码
  onSetRandom() {
    pwdData.random = UtilTool.generatePassword();
  },
  // 切换密码类型
  onChangeOption() {
    pwdData.default = "";
    pwdData.random = "";
    pwdData.build = "";
    if (selectPwdModal.curOption === "default") {
      pwdData.default = props.initPwd;
    } else if (selectPwdModal.curOption === "random") {
      selectPwdModal.onSetRandom();
    }
  },
  // 复制密码
  onCopy() {
    let password = pwdData.default;
    if (selectPwdModal.curOption === "random") {
      password = pwdData.random;
    } else if (selectPwdModal.curOption === "build") {
      password = pwdData.build;
    }
    UtilTool.copyToClip(["你所复制的密码为：", password]);
    message.success("密码复制成功");
  }
});

// 将传过来的密码更新给输入的密码
watch(
  () => props.password,
  () => {
    webxInputPwdData.passwordVal = props.password;
  }
);
// 将输入的密码更新给父级
watch(
  () => webxInputPwdData.passwordVal,
  () => {
    emits("update:password", webxInputPwdData.passwordVal);
  }
);

watch(() => props.initPwd, () => {
  pwdData.default = props.initPwd;
})
</script>

<template>
  <div>
    <AInputGroup compact>
      <AInputPassword
        style="width: calc(100% - 100px)"
        v-model:value="webxInputPwdData.passwordVal"
        readonly
        placeholder="请选择用户登录密码"
      />
      <AButton type="primary" @click="selectPwdModal.onChange(true)">获取密码</AButton>
    </AInputGroup>
    <!-- 选择密码弹窗 -->
    <AModal v-model:open="selectPwdModal.open" title="选择密码" @ok="selectPwdModal.onSelect">
      <AFormItemRest>
        <ARadioGroup
          v-model:value="selectPwdModal.curOption"
          :options="selectPwdModal.pwdOptions"
          @change="selectPwdModal.onChangeOption"
        />
        <div class="py-4">
          <div class="mb-2">您的密码为：
            <AButton type="link" @click="selectPwdModal.onCopy">
              <CopyOutlined />
              复制
            </AButton>
          </div>
          <div class="flex items-center gap-2 text-xl">
            <div v-if="selectPwdModal.curOption === 'default'">
              {{ pwdData.default }}
            </div>
            <div
              class="w-full flex justify-between items-center"
              v-if="selectPwdModal.curOption === 'random'"
            >
              {{ pwdData.random }}
              <AButton type="primary" @click="selectPwdModal.onSetRandom">重新生成</AButton>
            </div>
            <div class="w-full" v-if="selectPwdModal.curOption === 'build'">
              <AInputPassword v-model:value="pwdData.build" placeholder="请指定密码" />
            </div>
          </div>
        </div>
      </AFormItemRest>
    </AModal>
  </div>
</template>

<style scoped lang="less"></style>
